<template>
  <div class="app-main">
    <el-row>
      <!--  左边内容，帖子列表   -->
      <el-col :span="18">
        <div v-for="(item, index) in postList" :key="index">
          <post-card :authorName="item.authorName" :authorAvatar="item.authorAvatar" :content="item.content" />
        </div>
      </el-col>
      <!--  右边内容，发帖按钮与热度排名   -->
      <el-col :span="5">
        <side-bar />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PostCard from './PostCard.vue'
import SideBar from './SideBar.vue'
import { ref } from 'vue'
// 头像
const avatarTemp = '/src/assets/avatar.jpg'

// 文章详情
const postList = ref([
  {
    authorName: '朽木',
    content: '子夏曰：“贤贤易色 ，事父母能竭其力，事君能致其身 ，与朋友交言而有信。虽曰未学 ，吾必谓之学矣 。”子曰：“能以礼让为国乎？何有？不能以礼让为国，如礼何 ？”',
    authorAvatar: avatarTemp
  },
  {
    authorName: '朽木1',
    content: '子曰：“不患无位，患所以立；不患莫己知 ，求为可知也 。” 子曰：“不仁者不可以久处约，不可以长处乐。仁者安仁，知者利仁。”',
    authorAvatar: avatarTemp
  },
  {
    authorName: '朽木2',
    content: '子夏曰：“贤贤易色 ，事父母能竭其力，事君能致其身 ，与朋友交言而有信。虽曰未学 ，吾必谓之学矣 。”子曰：“能以礼让为国乎？何有？不能以礼让为国，如礼何 ？”',
    authorAvatar: avatarTemp
  },
  {
    authorName: '朽木3',
    content: '子夏曰：“贤贤易色 ，事父母能竭其力，事君能致其身 ，与朋友交言而有信。虽曰未学 ，吾必谓之学矣 。”子曰：“能以礼让为国乎？何有？不能以礼让为国，如礼何 ？”',
    authorAvatar: avatarTemp
  },
  {
    authorName: '朽木4',
    content: '子夏曰：“贤贤易色 ，事父母能竭其力，事君能致其身 ，与朋友交言而有信。虽曰未学 ，吾必谓之学矣 。”子曰：“能以礼让为国乎？何有？不能以礼让为国，如礼何 ？”',
    authorAvatar: avatarTemp
  }
])
</script>

<style lang="scss" scoped>
.app-main {
  background-color: #eff3f5;
}
</style>
